<template>
  <div>
    <headers :head_title="head_title" />
    <main>
      <div class="file_list">
        <p>[主要症状]</p>
        <input type="text" placeholder="请输入您的主要症状" class="file_input" v-model="main" />
      </div>

      <div class="file_list">
        <p>[现病史]</p>
        <input type="text" placeholder="请输入您的主要症状" class="file_input" v-model="now" />
      </div>

      <div class="file_list">
        <p>[既往病史]</p>
        <input type="text" placeholder="请输入您的主要症状" class="file_input" v-model="before" />
      </div>

      <div class="file_list">
        <p>[最后一次治疗经历]</p>
        <input
          type="text"
          placeholder="请输入您的主要症状"
          class="file_input"
          v-model="Hospitalrecent"
        />
      </div>

      <!-- 开始日期选择器 -->
      <div class="file_list">
        <timeView />
      </div>
      <div class="file_list">
        <timeView2 />
      </div>

      <div class="file_list">
        <input type="text" placeholder="请输入治疗过程" class="file_input" v-model="Process" />
      </div>
      <div class="file_list">
        <p>[相关图片]</p>
        <van-notice-bar color="#000" background="#eee" style="font-size: 27px">
          &emsp; 最多六张图片;长按为图片排序
        </van-notice-bar>
        <index />
      </div>
      <div style="width: 100%; height: 200px; position: absolute">
        <el-button class="submit_tj" type="primary" @click="submit_list">保存</el-button>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref, watchEffect } from 'vue'
import headers from '@/components/header.vue'
import http from '@/utils/http'
// 引入开始时间选择器
import timeView from '@/components/timeView.vue'
// 引入结束时间选择器
import timeView2 from '@/components/timeView2.vue'
// 拖拽插件
import index from '@/components/index.vue'

const list_file=ref([])

//head头部数据
const head_title = ref('我的档案')

// 获取数据
// 获取主要病症数据
const main = ref('')
// 获取现病史
const now = ref('')
// 获取既病史
const before = ref('')
// 获取最近治疗医院
const Hospitalrecent = ref('')
// 获取开始时间
const finally_item1 = ref(localStorage.getItem('time1'))
// 获取结束时间
const finally_item2 = ref(localStorage.getItem('time2'))
//获取治疗过程
const Process = ref('')
// 获取照片资料
// 从本地archives里获取JSON.stringify后的图片数据，并赋值给imgssc

const imgssc = ref(JSON.parse(localStorage.getItem('archives')));
console.log(imgssc.value);


const router = useRouter()
const goBack = () => {
  router.go(-1)
  console.log('点击返回上一页')
}


// 存档案数据
async function getFile() {
    try {
        const res = await http.get('http://localhost:3000/list');
        list_file.value = res.data;
        console.log(list_file.value);
        if (list_file.value.length > 0) {
          // id = list_file.value[0].id+1;
            // 将 list_file 中第一个元素的相应字段赋值给对应的响应式数据
            main.value = list_file.value[0].diseaseMain;
            now.value = list_file.value[0].diseaseNow;
            before.value = list_file.value[0].diseaseBefore;
            Hospitalrecent.value = list_file.value[0].treatmentHospitalRecent;
            finally_item1.value = list_file.value[0].treatmentStartTime;
            finally_item2.value = list_file.value[0].treatmentEndTime;
            Process.value = list_file.value[0].treatmentProcess;
            // imgssc.value = list_file.value[0].archives;
        }
    } catch (error) {
        console.error('获取档案数据出现错误：', error);
        // 可以在这里添加一些提示逻辑，比如通过UI框架的提示组件给用户显示获取数据失败的提示信息等
    }
}
onMounted(() => {
    getFile();
});

// 用于生成下一个可用的
let nextId = ref(1);
const calculateNextId = () => {
    if (list_file.value.length === 0) {
        return 1;
    }
    const maxId = Math.max(...list_file.value.map((item) => item.id));
    return maxId + 1;
};


// 提交数据到仓库
const submit_list = () => {
  console.log('点击提交')

  //
  nextId.value = calculateNextId();
  const newDate = {
    // 用户id
    id: nextId.value,
    // 主要病症
    diseaseMain: main.value,
    // 现病史
    diseaseNow: now.value,
    // 既病史
    diseaseBefore: before.value,
    // 最近治疗医院
    treatmentHospitalRecent: Hospitalrecent.value,
    // 最近治疗开始时间
    treatmentStartTime: finally_item1.value,
    // 最近治疗结束时间
    treatmentEndTime: finally_item2.value,
    // 治疗过程
    treatmentProcess: Process.value,
    // 照片资料
    archives:[],
  }
  //上传数据
  const headers = {
    'Content-Type': 'application/json',
  }
  http
    .post('http://localhost:3000/list', newDate, { headers })
    .then((res) => {
      if (res.status >= 200 && res.status < 300) {
        console.log('提交成功，响应数据:', res.data)
      } else {
        console.error('提交失败，状态码:', res.status)
      }
    })
    .catch((error) => {
      console.error('提交数据出现错误：', error)
    })
     router.push("/my_file")
}






const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
console.log(userInfo)


</script>

<style scoped>


* {
  margin: 0;
  padding: 0;
}
.head {
  height: 50px; /* 100px * 0.5 */
  line-height: 75px; /* 150px * 0.5 */
  display: flex;
  /* background: red; */
  color: #999;
  position: relative;
}

.message_title {
  color: black;
  position: absolute;
  left: 40%;
  font-size: 17px; /* 34px * 0.5 */
}

.line {
  height: 7.5px; /* 15px * 0.5 */
  width: 100%;
  margin-top: 5px; /* 10px * 0.5 */
}

.file_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 5px; /* 10px * 0.5 */
}

.file_list > p {
  font-size: 13.5px; /* 27px * 0.5 */
  margin-top: 5px; /* 10px * 0.5 */
  margin-left: 12.5px; /* 25px * 0.5 */
  color: #368beb;
}

.file_input {
  width: 46.5%; /* 93% * 0.5 */
  height: 25px; /* 50px * 0.5 */
  margin-left: 12.5px; /* 25px * 0.5 */
  margin-top: 2.5px; /* 5px * 0.5 */
  border: none;
  border-bottom: solid 0.5px #ccc; /* 1px * 0.5 */
  padding-bottom: 2.5px; /* 5px * 0.5 */
}

.submit_tj {
  width: 46.5%; /* 93% * 0.5 */
  height: 40px; /* 80px * 0.5 */
  font-size: 15px; /* 30px * 0.5 */
  margin-left: 12.5px; /* 25px * 0.5 */
  position: relative;
  bottom: 0%;
  top: 20%; /* 40% * 0.5 */
}
</style>
